<template>
  <div v-if="showPage" class="garageBox">
    <c-title :hide="false" :text="pageTitle"></c-title>
    <template v-if="carList.length != 0 && showPage">
      <van-swipe class="my-swipe" :loop="false" :touchable="true" :initial-swipe="initial_swipe" @change="swipechange"
        indicator-color="#FB1622">
        <van-swipe-item v-for="item in carList" :key="item.id">
          <div class="carCardBox">
            <div class="carCardBoxL">
              <img src="../../assets/images/carImg/carLogo.png" class="carLogo" />
            </div>
            <div class="carCardBoxR">
              <div class="carCardBoxR_text1">
                {{ item.brand_name }} {{ item.series_name }}
              </div>
              <div class="carCardBoxR_text2">
                {{ item.nf }}款 {{ item.pl }} {{ item.gearbox }} {{ item.version }}
              </div>
            </div>
            <div class="line"></div>
            <div v-if="item.is_default == 1" class="renzhengBox">
              已设为默认
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="carInfoBox">
        <div class="carInfoItem">
          <div class="carInfoItemLable">车架号</div>
          <div class="carInfoItemCont">{{ carList[initial_swipe].vin_code }}</div>
        </div>
        <div class="carInfoItem">
          <div class="carInfoItemLable">车辆款型</div>
          <div class="carInfoItemCont">{{ carList[initial_swipe].nf }}款 {{ carList[initial_swipe].pl }}
            {{ carList[initial_swipe].gearbox }} {{ carList[initial_swipe].version }}</div>
        </div>
        <div class="carInfoItem">
          <div class="carInfoItemLable">发动机</div>
          <div class="carInfoItemCont">{{ carList[initial_swipe].fdj }}</div>
        </div>
        <div class="carInfoItem">
          <div class="carInfoItemLable">底盘</div>
          <div class="carInfoItemCont">{{ carList[initial_swipe].dp }}</div>
        </div>
        <div class="carInfoItem">
          <div class="carInfoItemLable">轮胎尺寸</div>
          <div class="carInfoItemCont"><el-input v-model="carList[initial_swipe].ltcc"
              @change="changeInput($event, 'ltcc')"></el-input></div>
        </div>
        <div class="carInfoItem">
          <div class="carInfoItemLable">电瓶型号</div>
          <div class="carInfoItemCont"><el-input v-model="carList[initial_swipe].dpxh"
              @change="changeInput($event, 'dpxh')"></el-input></div>
        </div>
        <div class="carInfoItem">
          <div class="carInfoItemLable">车牌号</div>
          <div class="carInfoItemCont"><el-input v-model="carList[initial_swipe].cph"
              @change="changeInput($event, 'cph')"></el-input></div>
        </div>
        <div class="carInfoItem" style="border-bottom: none;">
          <div class="carInfoItemLable">保险日期</div>
          <div class="carInfoItemCont">
            <el-date-picker v-model="carList[initial_swipe].insurance_date" @change="changeInput($event, 'insurance_date')" type="date" style="width:188px;text-align: right;padding-right:0"
              placeholder="选择日期">
            </el-date-picker>

          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="nocardata">暂无车辆赶快去添加您的爱车吧~</div>
    </template>
    <div class="addcarbtn" @click="goPerfectCar">
      我的车库
    </div>
  </div>
</template>

<script>
import {
  Toast
} from 'vant';
import cTitle from "components/title";
export default {
  data() {
    return {
      carList: [],
      initial_swipe: 0,
      showPage: false,
      backnum: 2,
      pageTitle: ''
    };
  },
  created() {
    // this.getcarlist()
  },
  mounted() {

  },
  activated() {
    this.getcarlist()
    this.pageTitle = this.$route.query.title || "我的爱车";
    this.fun.setWXTitle(this.pageTitle);
  },
  deactivated() {

  },
  // beforeRouteLeave(to, from, next) {

  // },
  methods: {
    changeInput(e, name) {
      this.carList[this.initial_swipe][name] = e;
      this.editCart();
    },
    editCart(){
      let that = this;
      let url = "car.personalCarAdd";
      let json = this.carList[this.initial_swipe];
      $http.post(url, json, "loading").then(response => {
        console.log(response)
        if (response.result == 1) {
          that.getcarlist();
        } else {
          Toast(response.msg);
        }
      })
    },
    swipechange(index) {
      console.log(index)
      this.initial_swipe = index
    },
    goPerfectCar() {
      this.$router.push(this.fun.getUrl('myGarage'))
    },
    getcarlist() {
      const _this = this
      let url = "car.personalCarList";
      let json = {
        member_id: window.localStorage.getItem('member_id')
      };
      $http.post(url, json, "loading").then(response => {
        console.log(response)
        if (response.result == 1) {
          this.carList = response.data
          this.carList.forEach((item, index) => {
            if (item.is_default == 1) {
              this.initial_swipe = index
            }
          })
          setTimeout(function () {
            _this.showPage = true
          }, 100)
        } else {
          Toast(response.msg);
        }
      })
    }
  },
  components: {
    cTitle
  }
};

</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.garageBox {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  padding: 0.75rem;
  box-sizing: border-box;

  .nocardata {
    font-size: 0.875rem;
    text-align: center;
    color: #333;
    margin-top: 10rem;
  }

  ::v-deep .van-swipe__indicator {
    background: #666;
  }

  ::v-deep .van-swipe__indicators {
    bottom: 0.5rem;
  }

  ::v-deep .el-input__inner {
    text-align: right;
    padding-right:15px;
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 8.125rem;
    text-align: center;

    .carCardBox {
      width: 100%;
      height: 100%;
      height: 8.125rem;
      background: #fff;
      border-radius: 0.5rem;
      overflow: hidden;
      position: relative;

      .renzhengBox {
        width: auto;
        padding: 0 0.5rem;
        line-height: 1.5rem;
        background: #FB1622;
        border-radius: 0.25rem;
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 0.75rem;
        color: #fff;
        text-align: center;
      }

      .line {
        width: 1px;
        height: 6.125rem;
        background: #ddd;
        position: absolute;
        left: 26%;
        top: 1rem;
      }

      .carCardBoxL {
        width: 26%;
        height: 100%;
        float: left;

        .carLogo {
          display: block;
          width: 2.5rem;
          height: 2.5rem;
          margin: 2.6rem auto 0;

        }
      }

      .carCardBoxR {
        width: 74%;
        height: 100%;
        float: right;
        padding-left: 1rem;

        .carCardBoxR_text1 {
          font-weight: 500;
          font-size: 1rem;
          color: #333333;
          line-height: 1.375rem;
          text-align: left;
          margin-top: 2.6rem;
        }

        .carCardBoxR_text2 {
          font-weight: 500;
          font-size: 0.75rem;
          color: #666;
          line-height: 1rem;
          text-align: left;
          margin-top: 0.25rem;
        }
      }
    }
  }

  .carInfoBox {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 0.5rem;
    margin-top: 0.75rem;
    padding: 0 0.625rem;
    box-sizing: border-box;

    .carInfoItem {
      width: 100%;
      height: 3rem;
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;

      .carInfoItemLable {
        width: 6.25rem;
        line-height: 3rem;
        text-align: left;
        font-size: 0.75rem;
        color: #333;
        float: left;
      }

      .carInfoItemCont {
        line-height: 3rem;
        text-align: left;
        font-size: 0.75rem;
        color: #333;
      }
    }
  }

  .addcarbtn {
    width: 90%;
    height: 2.5rem;
    background: #FB1622;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: #FFFFFF;
    line-height: 2.5rem;
    text-align: center;
    position: fixed;
    left: 5%;
    bottom: 1rem;
  }
}
</style>
